import React, { Component } from 'react'
import { Row, Col, Card, Statistic } from 'antd'
import { SaveOutlined } from '@ant-design/icons'
import { FormattedMessage } from 'react-intl'
import { byteFroamt } from './common.js'
import './App.css'

import { Liquid } from '@ant-design/charts'

export default class MemoryState extends Component {
    getPercent = (free, total) => {
        let numTotal = total.match(/(\d+)/)[1]
        let numFree = free.match(/(\d+)/)[1]
        let percent = Math.floor((numTotal - numFree) / numTotal * 100) / 100
        return percent
    }

    getColor = (free, total) => {
        let pd = this.getPercent(free, total)
        let color = (pd < 0.5) ? "#52c41a" :
            ((pd < 0.75) ? "#1890ff" :
                ((pd < 0.9) ? "#faad14" : "#ff4d4f"))
        return color
    }

    render() {

        return (
            <Row>
                <Card.Meta className="stateCard"
                    avatar={<SaveOutlined />}
                    title="RAM"
                />
                <Col xs={24} sm={24} md={24} lg={12}>

                    {/* 获取内存信息 */}
                    <Card className="stateCard" title={<FormattedMessage id="Memory" />}>
                        <Liquid
                            height={200}
                            padding={30}
                            renderer="svg"
                            percent={this.getPercent(this.props.memory.MemFree, this.props.memory.MemTotal)}
                            color={this.getColor(this.props.memory.MemFree, this.props.memory.MemTotal)}
                        />
                        <Row span={16}>
                            <Col span={12}>
                                <Statistic
                                    title={<FormattedMessage id="Total" />}
                                    value={byteFroamt(this.props.memory.MemTotal)}
                                />
                            </Col>
                            <Col span={12}>
                                <Statistic
                                    title={<FormattedMessage id="Free" />}
                                    value={byteFroamt(this.props.memory.MemFree)}
                                />
                            </Col>
                        </Row>
                    </Card>
                </Col>

                <Col xs={24} sm={24} md={24} lg={12}>

                    {/* 获取交换空间信息 */}
                    <Card className="stateCard" title={<FormattedMessage id="Swap" />}>
                        <Liquid
                            height={200}
                            padding={30}
                            renderer="svg"
                            percent={this.getPercent(this.props.memory.SwapFree, this.props.memory.SwapTotal)}
                            color={this.getColor(this.props.memory.SwapFree, this.props.memory.SwapTotal)}
                        />
                        <Row span={16}>
                            <Col span={12}>
                                <Statistic
                                    title={<FormattedMessage id="Total" />}
                                    value={byteFroamt(this.props.memory.SwapTotal)}
                                />
                            </Col>
                            <Col span={12}>
                                <Statistic
                                    title={<FormattedMessage id="Free" />}
                                    value={byteFroamt(this.props.memory.SwapFree)}
                                />
                            </Col>
                        </Row>
                    </Card>

                </Col>
            </Row>
        )
    }
}
